<template>
  <div class="child">
    <h1>子组件</h1>
    <!-- 接收来组父组件传递的消息 -->
    <p>来自父组件的内容{{message}}</p>
    <!-- 向父组件发消息 -->
    <button @click="sendMessage">向父组件发消息</button>
  </div>
</template>

<script>
export default {
  name: "ChildEx",
  // 接收父组件传递的数据 子组件定义自己的属性
  props: {
    message:String
  },
  methods: {
    // 向父组件发消息
    sendMessage() {
      // 点击触发事件
      this.$emit("command-from-child", "来自子组件的消息");
    }
  }
}
</script>

<style scoped>
  .child {
    border: 1px solid #ccc;
    padding: 10px;
  }
  .child p {
    color: blue;
  }
</style>